<template>
  <view class="wrapper">
    <view class="content">
      <u-cell-group>
        <u-cell>
          <view slot="title" class="flex  justify-between">
            <view class="flex-sb">
              <view class="flex w-300 flex-aic">
                <view class="w-150 c-99"> 姓名: </view>
                <text class="">
                  <u--input v-model="listData.realName" placeholder="请输入内容" border="none"></u--input>
                </text>
              </view>
              <view class="flex-1 flex-sb p-l-20" @click="lengthShow = true">
                <view class="w-100 c-99"> 门店: </view>
                <text class="w-150"> {{ listData.shopName }} </text>
              </view>
            </view>
          </view>
          <clIcon v-if="this.id" slot="right-icon" @click="neoIconDelect()" class="" type="icon-shanchu" color="#000"
            size="20"></clIcon>
        </u-cell>

        <u-cell>
          <view slot="title" class="flex  justify-between">
            <view class="flex flex-aic">
              <view class="w-150 c-99"> 登录帐号: </view>
              <text class=""><u--input v-model="listData.username" placeholder="请输入内容" border="none"></u--input></text>
            </view>
          </view>
        </u-cell>
        <u-cell>
          <view slot="title" class="flex  justify-between">
            <view class="flex flex-aic">
              <view class="w-150 c-99"> 登录密码: </view>
              <text class=""><u--input v-model="listData.password" placeholder="请输入内容" border="none"></u--input></text>
            </view>
          </view>
        </u-cell>

        <u-cell>
          <view slot="title" class="flex  justify-between">
            <view class="flex flex-aic">
              <view class="w-100 c-99"> 角色: </view>
              <text class="w-200 flex">
                <u-checkbox-group placement="row" v-model="listData.roleList" @change="checkboxChange">
                  <u-checkbox class="m-r-30" :customStyle="{}" v-for="(item, index) in checkboxList1" :key="index" :label="item.roleName"
                    :name="item.id">
                  </u-checkbox>
                </u-checkbox-group>
              </text>
            </view>
          </view>
        </u-cell>
        <u-cell>
          <view slot="title" class="flex  justify-between">
            <view class="flex-sb">
              <view class="flex w-300 flex-aic" @click="weightShow = true">
                <view class="w-100 c-99"> 性别: </view>
                <text class="">{{ listData.sex == 0 ? "女" : "男" }} </text>
              </view>
              <view class="flex w-300 flex-aic">
                <view class="w-100 c-99"> 手机: </view>
                <text class=""><u--input v-model="listData.phone" placeholder="请输入内容" border="none"></u--input></text>
              </view>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex ">
            <view class="w-100 c-99"> 地址: </view>
            <view class="flex-1"><u--input v-model="listData.address" placeholder="请输入内容" border="none"></u--input>
            </view>
          </view>
        </u-cell>
        <u-cell arrow-direction="right">
          <view slot="title" class="flex ">
            <view class="w-100 c-99"> 邮箱: </view>
            <view class="flex-1">
              <u--input v-model="listData.email" placeholder="请输入内容" border="none"></u--input>
            </view>
          </view>
        </u-cell>
        <!-- <u-gap bgColor="#eee" height="10"></u-gap> -->
      </u-cell-group>
    </view>
    <!-- 选择器 -->
      
    <view class="fixed-btn">
      <u-button text="保存" @click="save()" type="primary" shape="circle"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
    </view>
    <cxPopupNotification
      :type="listData.shopId"
      :clothArray="lengthColumns"
      :show="lengthShow"
      @onLikeClose="(() =>{lengthShow = false})"
      @onCheck="
        (e) => {
          (listData.shopName = e.label),
            (listData.shopId = e.value),
            (lengthShow = false);
        }
      "
    >
    </cxPopupNotification>


    <cxPopupNotification
      :type="listData.sex"
      :clothArray="weightColumns"
      :show="weightShow"
      @onLikeClose="(() =>{weightShow = false})"
      @onCheck="
        (e) => {
          (listData.sex = e.value),
            (weightShow = false);
        }
      "
    >
    </cxPopupNotification>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { getlist as getShowlist } from "@/apis/bill/information/shop";
import { getlist as getAdminlist } from "@/apis/bill/information/admin";
import cxPopupNotification from "@/components/cx-popup-notification/cx-popup-notification";

import {
  delectData,
  addData,
  getIdData,
  updateIdData,
} from "@/apis/bill/information/staff";
export default {
  components: {
    clIcon,
    cxPopupNotification
  },
  props: {
    id: {
      type: String || Number,
      default: null,
    },
  },
  data() {
    return {
      calendarShow: false,
      calendarMode: "single",

      lengthShow: false,
      lengthColumns: [],

      weightName: "g",
      weightShow: false,
      weightColumns: [
        {
          label:'男',
          value:1
        },
        {
          label:'女',
          value:0
        },
      ],
      config: {
        title: "产品",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      listData: {
        address: null, //地址
        email: null, //email
        password: null, //password
        phone: null, //phone
        realName: null, //姓名
        roleList: [], //角色
        sex: 1, //sex  女 = 0  男 = 1
        shopId: null, //shopId
        shopName: null, //shopName
        username: null, //登录帐号
      },
      showlists: [],
      checkboxList1: [], // 角色类型列表
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.id) {
      this.getIdDatas(this.id);
    }
    // this.initData();
    this.getShowlists();
    this.getAdminlists();
  },
  onReady() { },
  methods: {
    getIdDatas(id) {
      getIdData(id).then((res) => {
        if (!res.flag) return;
        this.listData = res.data;
      });
    },
    save() {
      if (this.id) {
        updateIdData(this.listData).then((res) => {
          if (!res.flag) return;
          uni.showLoading({
            title: res.title
          })
          this.$Router.back()
        });

      } else {
        addData(this.listData).then((res) => {
          if (!res.flag) return;
          uni.showLoading({
            title: res.title
          })
          this.$Router.back()
        });
      }

    },
    // 选择check
    checkboxChange(n) {
      this.listData.roleList = n;
    },
    // 获取管理员列表数据
    getAdminlists() {
      // 1. 查询列表信息
      let billId = {
        data: {
          keywords: "",
        },
      };
      getAdminlist().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.checkboxList1 = data;
      });
    },
    // 获取门店数据
    getShowlists() {
      // 1. 查询列表信息
      let billId = {
        data: {
          keywords: "",
        },
      };
      getShowlist().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.lengthColumns = data;
      });
    },
    neoIconDelect() {
      // 删除功能
      delectData(this.id).then((res) => {
        if (!res.flag) return;
      });
    },

  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  // height: 100%;
  background-color: #fff;
}
</style>